<template>
  <div class="menu-manage-view">
    <div class="menu-manage-left">
      <div class="menu-manage-left-top">
        <el-button type="primary" class="add-button" @click="addTopMenu">新增顶级菜单</el-button>
      </div>
      <div class="menu-manage-left-bottom"
           v-loading="isLoading"
           element-loading-text="数据加载中"
           element-loading-spinner="el-icon-loading"
           element-loading-background="rgba(21, 29, 54, 0.8)"
      >
        <el-tabs v-model="active" type="border-card" @tab-click="menuTabsClick">
          <el-tab-pane v-for="(item,index) in tabsList" :key="index" :label="item.datacode" :name="item.datavalue">
            <div class="menuContent">
              <el-scrollbar :native="false" tag="section" class="el-scroll">
                <el-tree :data="menudata" :props="defaultProps" :highlight-current="true"
                         @node-click="menuNodeClick"></el-tree>
              </el-scrollbar>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="menu-manage-right">
      <div class="menu-manage-right-top">
        <el-button type="primary" class="add-child-button" @click="addChildMenu" :disabled="isAddChild">新增子菜单
        </el-button>
      </div>
      <div class="menu-manage-right-bottom">
        <el-form label-width="80px" :model="formEditMenu" :rules="addToprules" ref="editForm">
          <el-form-item label="菜单名称" prop="name">
            <el-input v-model="formEditMenu.name" placeholder="菜单名称" :disabled="isAddChild"></el-input>
          </el-form-item>
          <el-form-item label="菜单路径">
            <el-input v-model="formEditMenu.name" placeholder="菜单路径" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="菜单图标" prop="icon">
            <el-input v-model="formEditMenu.icon" placeholder="菜单图标" :disabled="isAddChild"></el-input>
          </el-form-item>
          <el-form-item label="菜单url" prop="url">
            <el-input v-model="formEditMenu.url" placeholder="菜单url" :disabled="isAddChild"></el-input>
          </el-form-item>
          <el-form-item label="选择应用" prop="clientId">
            <el-select v-model="formEditMenu.clientId" placeholder="请选择应用" width="100%" :disabled="isAddChild">
              <el-option v-for="(item,index) in appListSelect" :key="index" :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="form-button">
            <template>
              <el-button type="warning" @click="delMenu" :disabled="isAddChild">删除</el-button>
              <el-button type="primary" @click="editMenuKeep" :disabled="isAddChild">保存</el-button>
            </template>
          </el-form-item>
        </el-form>


      </div>
    </div>
    <el-dialog
      title="新增顶级菜单"
      :visible="dialogAddTopMenu"
      width="30%"
      :before-close="dialogAddTopMenuClose">
      <el-form label-width="80px" :model="formMenuTop" :rules="addToprules" ref="addTopForm">
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="formMenuTop.name" placeholder="菜单名称"></el-input>
        </el-form-item>
        <el-form-item label="菜单路径">
          <el-input v-model="formMenuTop.name" placeholder="菜单路径" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="菜单图标" prop="icon">
          <el-input v-model="formMenuTop.icon" placeholder="菜单图标"></el-input>
        </el-form-item>
        <el-form-item label="菜单url" prop="url">
          <el-input v-model="formMenuTop.url" placeholder="菜单url" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="选择应用" prop="clientId">
          <el-select v-model="formMenuTop.clientId" placeholder="请选择应用" width="100%">
            <el-option v-for="(item,index) in appListSelect" :key="index" :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addTopMenuCancel">取 消</el-button>
        <el-button type="primary" @click="addTopMenuSure">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="新增子菜单"
      :visible="dialogAddChildMenu"
      width="30%"
      :before-close="dialogAddChildMenuClose">
      <el-form label-width="80px" :model="formMenuChild" :rules="addChildrules" ref="addChildForm">
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="formMenuChild.name" placeholder="菜单名称"></el-input>
        </el-form-item>
        <el-form-item label="菜单路径">
          <el-input placeholder="角色路径后缀" v-model="formMenuChild.name" disabled="true">
            <template slot="prepend" class="prepend">{{formMenuChild.path}}</template>
          </el-input>
        </el-form-item>
        <el-form-item label="菜单图标" prop="icon">
          <el-input v-model="formMenuChild.icon" placeholder="菜单图标"></el-input>
        </el-form-item>
        <el-form-item label="菜单url" prop="url">
          <el-input v-model="formMenuChild.url" placeholder="菜单url"></el-input>
        </el-form-item>
        <el-form-item label="选择应用">
          <el-select v-model="formMenuChild.clientId" placeholder="请选择应用" width="100%" :disabled="true">
            <el-option v-for="(item,index) in appListSelect" :key="index" :label="item.name"
                       :value="item.clientId"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addChildMenuCancel">取 消</el-button>
        <el-button type="primary" @click="addChildMenuSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

  export default {

    components: {
      // name
    },
    name: "menuManageView",
    props: {
      isLoading: {
        type: Boolean,
        default: false
      },
      menudata: {
        type: Array,
        default: []
      },
      defaultProps: {
        type: Object,
        default: {}
      },
      tabsList: {
        type: Array,
        default: []
      },
      outActive: {
        type: String,
        default: ""
      },
      dialogAddTopMenu: {
        type: Boolean,
        default: false
      },
      dialogAddChildMenu: {
        type: Boolean,
        default: false
      },
      appListSelect: {
        type: Array,
        default: []
      },
      formMenuTop: {
        type: Object,
        default: {}
      },
      formMenuChild: {
        type: Object,
        default: {}
      },
      isAddChild: {
        type: Boolean,
        default: true
      },
      formEditMenu: {
        type: Object,
        default: {}
      }
      // msg: String //  [name: typeof]
    },
    filters: {},
    computed: {
      active: {
        get: function () {
          return this.outActive;
        },
        set: function () {
        }
      }
    },
    watch: {},
    data() {
      let nameRules = (rule, value, callback) => {
        let reg = /^[\u4e00-\u9fa5]+$/;
        if (!value) {
          return callback(new Error('菜单名不能为空'));
        } else if (!reg.test(value)) {
          return callback(new Error('菜单必须是中文'));
        } else {
          callback();
        }
      };


      let iconRules = (rule, value, callback) => {
        let reg = /^(el|icon)?-/;
        if (value) {
          if (!reg.test(value)) {
            return callback(new Error('菜单图标必须是el- 或 icon-开头'));
          } else {
            callback();
          }
        } else {
          callback();
        }
      };

      return {
        // 表单校验
        addToprules: {
          name: [
            {required: true, validator: nameRules, trigger: 'blur'},
          ],
          icon: [
            {validator: iconRules, trigger: 'blur'}
          ],
          url: [
            {required: true, message: '请输入url', trigger: 'blur'}
          ],
          clientId: [
            {required: true, message: '请选择应用', trigger: 'change'}
          ]
        },
        addChildrules: {
          name: [
            {required: true, validator: nameRules, trigger: 'blur'},
          ],
          icon: [
            {validator: iconRules, trigger: 'blur'}
          ],
          url: [
            {required: true, message: '请输入url', trigger: 'blur'}
          ]
        }
      }
    },
    created() {

    },
    mounted() {

    },
    methods: {
      menuNodeClick(nodeInfo) {
        this.$emit('menuNodeClick', nodeInfo);
      },
      addTopMenuSure() {
        this.$emit('addTopMenuSure');
      },
      menuTabsClick(e) {
        this.$emit('menuTabsClick', e);
      },
      addTopMenu() {
        this.$emit('addTopMenu');
      },
      dialogAddTopMenuClose() {
        this.$emit('dialogAddTopMenuClose');
      },
      addTopMenuCancel() {
        this.$emit('addTopMenuCancel');
      },
      addTopMenuSure() {
        this.$emit('addTopMenuSure');
      },
      addChildMenu() {
        this.$emit('addChildMenu');
      },
      dialogAddChildMenuClose() {
        this.$emit('dialogAddChildMenuClose');
      },
      addChildMenuCancel() {
        this.$emit('addChildMenuCancel');
      },
      addChildMenuSure() {
        this.$emit('addChildMenuSure');
      },
      delMenu() {
        this.$emit('delMenu');
      },
      editMenuKeep() {
        this.$emit('editMenuKeep');
      }

    },
    destroyed() {

    }
  }
</script>

<style scoped lang="less">
  @import url("./menuManage");
</style>
